﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Droppable - Revert draggable position</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        #draggable
        {
            width: 148px;
            height: 148px;
            float: left;
            position: relative;
        }
        #droppable
        {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            position: relative;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#dropContianer").draggable();

            $("#droppable").droppable({
                tolerance: "pointer",
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function (e, ui) {

                    //$("#draggable").animate({ width: "100px", height: "100px" }, 3000);
                    $("#draggable").css({ "border": 0 });
                    $("#draggable").css({ width: "100px", height: "100px" });

                    var offset = $("#dropContianer").offset();
                    //calc position
                    left_big = (e.pageX - offset.left);
                    top_big = (e.pageY - offset.top);


                    left_small = left_big / $("#dropContianer").width() * $(this).width();
                    top_small = top_big / $("#dropContianer").height() * $(this).height();

                    leftdiff = left_big - left_small;
                    topdiff = top_big - top_small;


                    var newpos = {
                        left: leftdiff,
                        top: topdiff
                    };

                    $("#draggable").css(newpos);

                    var position = calcOffset($("#draggable"), $("#droppable"));
                    ui.draggable.appendTo(this);

                    $("#dropContianer").css(position);
                    $("#dropContianer").css({ margin: "0px" });
                    $("#draggable").css({ left: "0", top: "0" });
                    $("#dropContianer").animate({ width: "100px", height: "100px", margin: "0px" }, 3000, function () {
                        $("#dropContianer").animate({ left: "0", top: "0" }, 300, "easeOutBack");
                    });
                    //$("#dropContianer").css({ width: "100px", height: "100px" });
                },
                out: function (e, ui) {

                    $("#draggable").css({ width: "150px", height: "150px" });
                    $("#dropContianer").css({ width: "150px", height: "150px", margin: "0px" });
                }
            });
        });

        function calcOffset(src, target) {
            return {
                "left": parseInt(src.offset().left - target.offset().left, 10) + "px",
                "top": parseInt(src.offset().top - target.offset().top, 10) + "px"
            }
        }


    </script>
</head>
<body>
    <h1>
        实现mouse位置不变，先size,后position</h1>
    <div id="droppable" class="ui-widget-header">
    </div>
    <div style="width: 150px; height: 150px; margin: 0 auto; border: 2px solid #333;"
        id="dropContianer">
        <div id="draggable" class="ui-widget-content">
            <p>
                I revert when I'm dropped</p>
        </div>
    </div>
</body>
</html>
